<template>
	<view class="contentTop">
    <view>
      <view class="thrBoxFor">
        <view class="thrTahDetail">
          <view class="firName">设备名称</view>
          <view class="content">{{detailsObj.name}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">设备密钥</view>
          <view class="content">{{detailsObj.deviceKey}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">设备编号</view>
          <view class="content">{{detailsObj.num}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">设备类型</view>
          <view class="content">{{detailsObj.deviceType === 0 ? '网关' : detailsObj.deviceType === 1 ? '温湿度' : detailsObj.deviceType === 2 ? '开关' : detailsObj.deviceType === 3 ? '土壤温湿度' : '秤' }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">状态</view>
          <view class="content">{{detailsObj.status === 0 ? '关' : '开'}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail" v-show="detailsObj.switchNum != null">
          <view class="firName">开关总路数</view>
          <view class="content">{{detailsObj.switchCount}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail" v-show="detailsObj.switchNum != null">
          <view class="firName">开关初始路数</view>
          <view class="content">{{detailsObj.switchNum}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">厂商</view>
          <view class="content">{{getwayName}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail" v-show="getwayReal != ''">
          <view class="firName">网关</view>
          <view class="content">{{getwayReal}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">备注</view>
          <view class="content">{{detailsObj.remark}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">创建时间</view>
          <view class="content">{{detailsObj.createTime | setTime}}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail" v-show="detailsObj.deviceType === 1 || detailsObj.deviceType === 3">
          <view class="firName">设备详情</view>
          <view class="content_last" @click="toColorForPage(detailsObj.ext,detailsObj.name)">
            查看详情
          </view>
          <view class="lineForBottom"></view>
        </view>
      </view>
      <view class="lastForSwitch">
        <view class="customButton" @click="goback">返回上一页</view>
      </view>
    </view>
	</view>
</template>

<script>
  import request from '@/request/api';
  import { timestampToDatetime } from '@/untils/index';
	export default {
		data() {
			return {
        detailId: '',
        detailsObj: {},
        getwayName: '',
        getwayReal: ''
			}
		},
    filters: {
      setTime(val){
        return timestampToDatetime(val)
      }
		},
		onLoad(e) {
      this.detailId = e.id
      this.getwayName = e.name
		},
		onShow() {
      this.getDetails()
    },
		methods: {
      toColorForPage(val,name){
        if (val === null) {
          uni.$u.toast('数据暂未更新')
          return
        }
        uni.navigateTo({
          url:`./colorPage?extObj=${JSON.stringify(val)}&name=${name}`
        })
      },
      goback(){
        uni.navigateBack()
      },
      getDetails(){
        let obj = {
          url: '/device/detail',
          method: 'GET',
          data: {
            deviceId: this.detailId
          }
        }
        request(obj).then(res => {
          if (res.code === '200') {
            this.detailsObj = res.data
            if (res.data.gatewayId != null) {
              const switchObj = {
                url: '/device/gatewayList',
                method: 'GET',
                data: {
                  fId: res.data.fId 
                }
              }
              request(switchObj).then(result => {
                if (result.code === '200') {
                  const mylastRes = result.data.find((item) => {
                    return res.data.gatewayId === item.id
                  })
                  this.getwayReal = mylastRes.name
                } else {
                  uni.$u.toast(result.message)
                }
              })
            }
          } else {
            uni.showToast({
              title: res.message,
              mask: true
            })
          }
        })
      }
		}
	}
</script>

<style lang="scss">
.contentTop {
  width: 100%;
  height: auto;
}
.thrBoxFor {
  width: 96%;
  margin: 20rpx 2%;
  font-size: 32rpx;
}
.thrTahDetail {
  position: relative;
  color: #979797;
  padding: 15rpx 0;
  display: flex;
  justify-content: space-around;
  .firName {
    width: 50%;
    text-align: start;
    color: #000;
  }
  .content_last {
    text-align: end;
    color: #3c9cff;
    width: 50%;
  }
  .content {
    text-align: end;
    width: 50%;
  }
}
.lineForBottom {
  position: absolute;
  bottom: 0;
  height: 0.5rpx;
  width: 100%;
  background-color: #979797;
  opacity: .5;
}
.lastForSwitch {
  margin-top: 30rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  .customButton {
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
}
</style>
